<template>
  <div>
    <van-tabs  animated>
      <van-tab title="点菜">
        <van-tree-select  :items="items" :main-active-index.sync="items.id">
          <template  #content>
            <div v-if="items.id === 0" v-for="(item,index) in hot" :key="index">
              <van-card>
                <template #thumb>
                  <img :src="item.thumb" width="100px" height="110px">
                </template>
                <template #title>
                  <div>
                    {{item.title}}
                  </div>
                </template>
                <template #desc>
                  <div>
                    {{item.desc}}
                  </div>
                </template>
                <template #tags>
                  <van-tag plain type="danger">标签</van-tag>
                  <van-tag plain type="danger">标签</van-tag>
                </template>
                <template #price>
                  <div>
                    <span class="van-card__price-currency">￥</span>
                    <span class="van-card__price-integer">{{item.price}}.0</span>
                  </div>
                </template>
                <template #num>
                  <div>x{{item.count}}</div>
                </template>
                <template #footer>
                  <van-stepper v-model="item.count" theme="round" button-size="22" disable-input />
                </template>
              </van-card>
            </div>
            <div v-if="items.id === 1" v-for="(item,index) in discount" :key="index">
              <van-card>
                <template #thumb>
                  <img :src="item.thumb" width="100px" height="110px">
                </template>
                <template #title>
                  <div>
                    {{item.title}}
                  </div>
                </template>
                <template #desc>
                  <div>
                    {{item.desc}}
                  </div>
                </template>
                <template #tags>
                  <van-tag plain type="danger">标签</van-tag>
                  <van-tag plain type="danger">标签</van-tag>
                </template>
                <template #price>
                  <div>
                    <span class="van-card__price-currency">￥</span>
                    <span class="van-card__price-integer">{{item.price}}.0</span>
                  </div>
                </template>
                <template #num>
                  <div>x{{item.count}}</div>
                </template>
                <template #footer>
                  <van-stepper v-model="item.count" theme="round" button-size="22" disable-input :key="index" />
                </template>
              </van-card>
            </div>
            <div v-if="items.id === 2" v-for="(item,index) in qita" :key="index">
              <van-card>
                <template #thumb>
                  <img :src="item.thumb" width="100px" height="110px">
                </template>
                <template #title>
                  <div>
                    {{item.title}}
                  </div>
                </template>
                <template #desc>
                  <div>
                    {{item.desc}}
                  </div>
                </template>
                <template #tags>
                  <van-tag plain type="danger">标签</van-tag>
                  <van-tag plain type="danger">标签</van-tag>
                </template>
                <template #price>
                  <div>
                    <span class="van-card__price-currency">￥</span>
                    <span class="van-card__price-integer">{{item.price}}.0</span>
                  </div>
                </template>
                <template #num>
                  <div>x{{item.count}}</div>
                </template>
                <template #footer>
                  <van-stepper v-model="item.count" theme="round" button-size="22" disable-input :key="index" />
                </template>
              </van-card>
            </div>
            <div v-if="items.id === 3" v-for="(item,index) in qita" :key="index">
              <van-card>
                <template #thumb>
                  <img :src="item.thumb" width="100px" height="110px">
                </template>
                <template #title>
                  <div>
                    {{item.title}}
                  </div>
                </template>
                <template #desc>
                  <div>
                    {{item.desc}}
                  </div>
                </template>
                <template #tags>
                  <van-tag plain type="danger">标签</van-tag>
                  <van-tag plain type="danger">标签</van-tag>
                </template>
                <template #price>
                  <div>
                    <span class="van-card__price-currency">￥</span>
                    <span class="van-card__price-integer">{{item.price}}.0</span>
                  </div>
                </template>
                <template #num>
                  <div>x{{item.count}}</div>
                </template>
                <template #footer>
                  <van-stepper v-model="item.count" theme="round" button-size="22" disable-input :key="index" />
                </template>
              </van-card>
            </div>
            <div v-if="items.id === 4" v-for="(item,index) in qita" :key="index">
              <van-card>
                <template #thumb>
                  <img :src="item.thumb" width="100px" height="110px">
                </template>
                <template #title>
                  <div>
                    {{item.title}}
                  </div>
                </template>
                <template #desc>
                  <div>
                    {{item.desc}}
                  </div>
                </template>
                <template #tags>
                  <van-tag plain type="danger">标签</van-tag>
                  <van-tag plain type="danger">标签</van-tag>
                </template>
                <template #price>
                  <div>
                    <span class="van-card__price-currency">￥</span>
                    <span class="van-card__price-integer">{{item.price}}.0</span>
                  </div>
                </template>
                <template #num>
                  <div>x{{item.count}}</div>
                </template>
                <template #footer>
                  <van-stepper v-model="item.count" theme="round" button-size="22" disable-input :key="index" />
                </template>
              </van-card>
            </div>
            <div v-if="items.id === 5" v-for="(item,index) in qita" :key="index">
              <van-card>
                <template #thumb>
                  <img :src="item.thumb" width="100px" height="110px">
                </template>
                <template #title>
                  <div>
                    {{item.title}}
                  </div>
                </template>
                <template #desc>
                  <div>
                    {{item.desc}}
                  </div>
                </template>
                <template #tags>
                  <van-tag plain type="danger">标签</van-tag>
                  <van-tag plain type="danger">标签</van-tag>
                </template>
                <template #price>
                  <div>
                    <span class="van-card__price-currency">￥</span>
                    <span class="van-card__price-integer">{{item.price}}.0</span>
                  </div>
                </template>
                <template #num>
                  <div>x{{item.count}}</div>
                </template>
                <template #footer>
                  <van-stepper v-model="item.count" theme="round" button-size="22" disable-input :key="index" />
                </template>
              </van-card>
            </div>
            <div v-if="items.id === 6" v-for="(item,index) in qita" :key="index">
              <van-card>
                <template #thumb>
                  <img :src="item.thumb" width="100px" height="110px">
                </template>
                <template #title>
                  <div>
                    {{item.title}}
                  </div>
                </template>
                <template #desc>
                  <div>
                    {{item.desc}}
                  </div>
                </template>
                <template #tags>
                  <van-tag plain type="danger">标签</van-tag>
                  <van-tag plain type="danger">标签</van-tag>
                </template>
                <template #price>
                  <div>
                    <span class="van-card__price-currency">￥</span>
                    <span class="van-card__price-integer">{{item.price}}.0</span>
                  </div>
                </template>
                <template #num>
                  <div>x{{item.count}}</div>
                </template>
                <template #footer>
                  <van-stepper v-model="item.count" theme="round" button-size="22" disable-input :key="index" />
                </template>
              </van-card>
            </div>
          </template >
        </van-tree-select>
      </van-tab>
      <van-tab title="评价" class="ma-bt">
        <div class="evaluate">
          <van-row>
            <van-col span="12">
              <span class="pf">4.2</span>
              <span>
                <a>商家评分</a>
                <van-rate v-model="value" />
              </span>
            </van-col>
            <van-col span="7" class="as">
              <span>
                <a>口味</a>
                <div>4.9</div>
              </span>
              <span>
                <a>包装</a>
                <div>4.9</div>
              </span>
            </van-col>
            <van-col span="5">
              <span>
                <a>配送满意度</a>
                <div>100%</div>
              </span>
            </van-col>
          </van-row>
        </div>
        <div class="evaluates" v-for="i in evaluate">
          <div class="id">
            <span><img :src="i.img" width="40px"height="40px"></span>
            <span>
              <div>{{ i.name }}</div>
              <a>{{i.time}}</a>
            </span>
          </div>
          <div>
            <a>{{i.text}}</a>
          </div>
          <el-divider></el-divider>
        </div>
      </van-tab>
      <van-tab title="商家">
        <div class="div">
          <el-collapse>
            <el-collapse-item>
              <template slot="title">
                <i class="el-icon-view">查看地址</i>
              </template>
              <a class="el-icon-location-information">南北大道一号</a>
              <a class="el-icon-phone-outline"></a>
            </el-collapse-item>
          </el-collapse>
          <el-collapse>
            <el-collapse-item>
              <template slot="title">
              <i class="el-icon-view">查看食品安全档案</i>
              </template>
              <a>功能开发中</a>
            </el-collapse-item>
          </el-collapse>
          <el-collapse>
            <el-collapse-item>
              <template slot="title">
                <i class="el-icon-view">查看商家青山档案</i>
              </template>
              <a>功能开发中</a>
            </el-collapse-item>
          </el-collapse>
          <div class="div1">
            <a class="el-icon-office-building">配送服务：由商家提供配送服务</a>
            <el-divider></el-divider>
          </div>
          <div>
            <a class="el-icon-time">配送时间：10:00-13:00,16:00-21:00</a>
            <el-divider></el-divider>
          </div>
          <div>
            <a class="el-icon-eleme">本店可送到公寓楼下</a>
            <el-divider></el-divider>
          </div>
          <div>
            <a class="el-icon-guide">商家服务</a>
            <a class="el-icon-dish">跨天预定</a>
            <el-divider></el-divider>
          </div>
        </div>

      </van-tab>
    </van-tabs>
    <!--底部购物车-->
    <div>
      <div>
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服"  @click="kefu" />
          <van-goods-action-icon @click="showPopup" icon="cart-o" text="购物车"  />
          <van-goods-action-button @click="add"
            type="danger"
            text="立即购买"
          />
        </van-goods-action>
      </div>
      <!--购物车信息-->
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" >
        <van-card
          num="2"
          price="8.00"
          desc="商品描述"
          title="商品标题"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: "shangpin",
  methods: {
    showPopup() {
      this.show = true;
    },
    add(){
      this.$dialog.alert({
        // title:'标题呀',
        message:'已购买商品，请到订单界面查询'
      }).then(()=>{
        // console.log('点击了确认')
      })
    },
    kefu(){
      this.$dialog.alert({
        // title:'标题呀',
        message:'功能开发中......'
      }).then(()=>{
        // console.log('点击了确认')
      })
    },
  },
  data(){
    return{
      show: false,
      value:4,

      title:'商品名称',
      desc:'商品描述',
      thumb:'https://img01.yzcdn.cn/vant/ipad.jpeg',
      price:'8.0',
      count: 2,

      items:[],
      discount:[],
      hot:[],
      qita:[],

      evaluate:[]
    }
  },
  mounted() {
    this.$axios.get('/items').then( (result)=>{
      // console.log(result.data)
      this.items=result.data
    }).catch(function (err){
      // console.log(err)
    })
    this.$axios.get('/discount').then( (result)=>{
      // console.log(result.data)
      this.discount=result.data
    }).catch(function (err){
      // console.log(err)
    })
    this.$axios.get('/hotsale').then( (result)=>{
      // console.log(result.data)
      this.hot=result.data
    }).catch(function (err){
      // console.log(err)
    })
    this.$axios.get('/qita').then( (result)=>{
      // console.log(result.data)
      this.qita=result.data
    }).catch(function (err){
      // console.log(err)
    })
    this.$axios.get('/evaluate').then( (result)=>{
      // console.log(result.data)
      this.evaluate=result.data
    }).catch(function (err){
      // console.log(err)
    })
  },
}
</script>

<style scoped>
  .ma-bt{
    margin-bottom: 20px;
    background-color: #ffffff;
  }
  .evaluate{
    background-color: #eeeded;
    height: 35px;
    padding: 15px;
    margin-bottom: 30px;
  }
  .pf{
    font-size: 20px;
    color: #ff761a;
  }
  a{
    font-size: 10px;
    color: #848383;
  }
  .as{
    display: flex;
  }
  .as > span{
    margin-right: 15px;
  }
  .evaluates{
    background-color: #ffffff;
    padding: 0px 20px 0px 20px;
  }
  .id{
    display: flex;
  }
  .div{
    background-color: #ffffff;
  }
  .div1{
    margin-top: 15px;
  }
</style>
